<template>物业费管理</template>
<script setup>
// import {} from 'vue'
</script>
<template>
  <a-card>
    <a-form style="border-bottom: 1px solid #ccc">
      <a-space size="large">
        <a-form-item label="企业名称:">
          <a-input
            style="width: 220px; border-radius: 4px"
            placeholder="请输入企业名称"
            v-model:value="params.enterpriseName"
          ></a-input>
        </a-form-item>
        <a-form-item label="缴费时间:">
          <a-range-picker v-model:value="timer" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="getPropertyfeeAPI">查询</a-button>
        </a-form-item>
      </a-space>
    </a-form>
    <a-form>
      <a-form-item>
        <a-button type="primary" style="margin-top: 20px" @click="showDialog2 = true"
          >添加账单</a-button
        >
      </a-form-item>
    </a-form>
    <a-table
      size="small"
      :dataSource="rows"
      :columns="columns"
      :pagination="{
        // 分页数据
        total: total,
        current: params.page,
        'show-total': showTotal,
        showQuickJumper: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        pageSize: params.pageSize,
        onChange: changeCurrent,
        'show-size-changer': true
      }"
    >
      <template #bodyCell="{ column, record }">
        <!-- 判断是不是操作列 -->
        <template v-if="column.dataIndex === 'operate'">
          <a-space>
            <a-button type="primary" @click="getRecordInfo(record)">查看</a-button>
            <!-- <a-popconfirm title="确认删除该记录吗" @confirm="delPropertyfeeAPI(record.id)"> -->
            <a-button type="primary" danger @click="delPropertyfeeAPI(record.id)">删除</a-button>
            <!-- </a-popconfirm> -->
          </a-space>
        </template>
      </template>
    </a-table>
  </a-card>

  <add-get
    :recordInfo="recordInfo"
    v-model:showDialog1="showDialog1"
    v-model:showDialog2="showDialog2"
    @addSuccess="getPropertyfeeAPI"
  ></add-get>
</template>
<script setup>
import AddGet from './components/add-get.vue'
import { hint } from '@/hooks/hint.js'
import { ref, onMounted, reactive } from 'vue'
import { getPropertyfee, delPropertyfee } from '@/api/propertyfee.js'
import dayjs from 'dayjs'
// import { message } from 'ant-design-vue'
const columns = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '账单编号',
    dataIndex: 'billNumber'
  },
  {
    title: '企业名称',
    dataIndex: 'enterpriseName'
  },
  {
    title: '租赁楼宇',
    dataIndex: 'buildingName'
  },
  {
    title: '物业费(元/m²)',
    dataIndex: 'propertyFeePrice'
  },
  {
    title: '账单金额(元)',
    dataIndex: 'paymentAmount'
  },
  {
    title: '缴费时间',
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    dataIndex: 'operate'
  }
]
const rows = ref([]) //分页数据
const total = ref(null) //页总数
const showDialog1 = ref(false) //显示查看弹窗
const showDialog2 = ref(false) //显示添加弹窗
const params = reactive({
  enterpriseName: '', //企业名称
  start: '', //起始时间-缴费时间查询，起始时间和截止时间若有值时，须都有值
  end: '', //截止时间-缴费时间查询，起始时间和截止时间若有值时，须都有值,且截止时间大于起始时间
  page: '1', //当前页码默认是
  pageSize: '10' //页面大小，默认是10
}) //分页请求的必需

const timer = ref([]) //时间
const recordInfo = reactive({}) // 定义传值的对象record
onMounted(async () => {
  // 表示 首次渲染已经完成
  await getPropertyfeeAPI()
})
//查询列表
const getPropertyfeeAPI = async () => {
  if (timer.value?.length) {
    params.start = dayjs(timer.value[0]?.$d).format('YYYY-MM-DD')
    params.end = dayjs(timer.value[1]?.$d).format('YYYY-MM-DD')
  } else {
    params.start = ''
    params.end = ''
  }
  const res = await getPropertyfee(params)
  rows.value = res.data.rows.map((el, index) => ({ ...el, index: index + 1 }))
  console.log(rows.value)
  total.value = res.data.total
}
//改变页数
const changeCurrent = async (page, pageSize) => {
  params.page = page
  params.pageSize = pageSize
  await getPropertyfeeAPI()
}
const showTotal = () => {
  return `总共${total.value}条`
}

// 删除用户
const delPropertyfeeAPI = async (id) => {
  const { Confirm, msg } = hint()
  try {
    await Confirm('是否确认删除当前计费规则？')
    console.log(id)
    await delPropertyfee(id)
    msg('success', '删除用户成功')
    await getPropertyfeeAPI()
    console.log('1')
  } catch (e) {
    console.log(e)
  }
}

const getRecordInfo = (record) => {
  Object.assign(recordInfo, record)
  showDialog1.value = true
}
</script>
